﻿<UserControl x:Class="CC.VolumeMixer.Controls.ColorPicker"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             Height="20" Width="200">
    
    <StackPanel>
        <StackPanel Orientation="Horizontal" MouseLeftButtonDown="Header_MouseLeftButtonDown" MouseLeave="Header_MouseLeave">
            <Grid>
                <Rectangle Fill="Black" Height="20" Width="60" />
                <TextBlock x:Name="TextBlockHtmlColor" Foreground="White" Text="#FF0000" FontFamily="Arial" FontSize="11" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Grid>
            
            <Rectangle x:Name="RectangleSelectedColor" Width="140" Height="20" Fill="Black" />
        </StackPanel>
        
        <Canvas>
            <Popup Name="PopupMain" AllowsTransparency="True" Margin="0" PopupAnimation="Slide" Width="200">
                <!--<Border Style="{StaticResource BorderOuterStyle}" Margin="0">
                    <Border Style="{StaticResource BorderInnerStyle}" Padding="0">-->
                        <StackPanel Orientation="Horizontal">
                            <Canvas Width="20" Height="180">
                                <Rectangle x:Name="HueMonitor" Width="20" Height="180" MouseLeftButtonDown="HueMonitor_MouseLeftButtonDown" MouseLeftButtonUp="HueMonitor_MouseLeftButtonUp" MouseMove="HueMonitor_MouseMove">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint ="0,0" EndPoint="0,1">
                                            <GradientStop Offset="0.00" Color="#ffff0000"/>
                                            <GradientStop Offset="0.17" Color="#ffffff00"/>
                                            <GradientStop Offset="0.33" Color="#ff00ff00"/>
                                            <GradientStop Offset="0.50" Color="#ff00ffff"/>
                                            <GradientStop Offset="0.66" Color="#ff0000ff"/>
                                            <GradientStop Offset="0.83" Color="#ffff00ff"/>
                                            <GradientStop Offset="1.00" Color="#ffff0000"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Canvas x:Name="HueSelector" IsHitTestVisible="False" Height="8" Canvas.Left="0" Canvas.Top="-4">
                                    <Path Width="5" Height="8" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z " />
                                    <Path Width="5" Height="8" Canvas.Top="8" Canvas.Left="20" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z ">
                                        <Path.RenderTransform>
                                            <RotateTransform Angle="180" />
                                        </Path.RenderTransform>
                                    </Path>
                                </Canvas>
                            </Canvas>
                            <Canvas Canvas.Top="0" Canvas.Left="20">
                                <Rectangle x:Name="ColorSample" Width="180" Height="180" Fill="Red" MouseLeftButtonDown="ColorSample_MouseLeftButtonDown" MouseLeftButtonUp="ColorSample_MouseLeftButtonUp" MouseMove="ColorSample_MouseMove"></Rectangle>
                                <Rectangle x:Name="WhiteGradient" IsHitTestVisible="False" Width="180" Height="180">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                            <GradientStop Offset="0" Color="#ffffffff"/>
                                            <GradientStop Offset="1" Color="#00ffffff"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Rectangle x:Name="BlackGradient" IsHitTestVisible="False" Width="180" Height="180">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,1" EndPoint="0, 0">
                                            <GradientStop Offset="0" Color="#ff000000"/>
                                            <GradientStop Offset="1" Color="#00000000"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Canvas x:Name="SampleSelector" IsHitTestVisible="False" Width="10" Height="10" Canvas.Left="100" Canvas.Top="96">
                                    <Ellipse Width="10" Height="10" StrokeThickness="3" Stroke="#FFFFFFFF"/>
                                    <Ellipse Width="10" Height="10" StrokeThickness="1" Stroke="#FF000000"/>
                                </Canvas>
                            </Canvas>
                        </StackPanel>
                    <!--</Border>
                </Border>-->
            </Popup>
        </Canvas>
        
    </StackPanel>
</UserControl>
